<template>
  <div class="IndexPage">

    <div class="indexSection1 flex">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          本月总应收账单
        </div>
        <div class="flex">
          <div>总已收款：<span>{{sm?sm.sumfee:0}}</span></div>
          <div>总未收款：<span>{{sm?sm.sumysfee:0}}</span></div>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          本月物业应收账单
        </div>
        <div class="flex">
          <div>总已收款：<span>{{tysm?tysm.sumfee:0}}</span></div>
          <div>总未收款：<span>{{tysm?tysm.sumysfee:0}}</span></div>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          本月租金应收账单
        </div>
        <div class="flex">
          <div>总已收款：<span>{{zjsm?zjsm.sumfee:0}}</span></div>
          <div>总未收款：<span>{{zjsm?zjsm.sumysfee:0}}</span></div>
        </div>
      </el-card>
    </div>

    <div class="separate flex">
      <div class="title">
        即将到期的合同（月）
      </div>
      <el-date-picker
        v-model="date"
        type="monthrange"
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份">
      </el-date-picker>
    </div>
    <el-table
      :data="contarctList"
      border
      align="center"
      style="width: 100%">
      <el-table-column
        prop="contarctCode"
        label="合同编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="companyName"
        label="客户名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="allarea"
        label="面积">
      </el-table-column>
      <el-table-column label="合同结束时间" align="center" prop="contractEndTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.contractEndTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- <div class="chartTitle separate flex">
       <div><div class="cricle" :style="{background:'#FF6F6A'}"></div>本月新增租赁合同数</div>
     </div>
     <div ref="myChart1" class="myCharts"></div>

     <div class="chartTitle separate flex">
       <div><div class="cricle" :style="{background:'#8cd5c2'}"></div>本月新增租赁面积</div>
     </div>
     <div ref="myChart2" class="myCharts"></div>

     <div class="chartTitle separate flex">
       <div><div class="cricle" :style="{background:'#39A5FC'}"></div>快到期合同列表</div>
     </div>
     <div ref="myChart3" class="myCharts"></div>-->

  </div>
</template>

<script>
  import {daoqiContarct} from "@/api/contarct/contarct";
  import {getSm, getySm, getZjSm} from "@/api/income/income";

  export default {
    data() {
      return {
        date: "",
        tableData: [],
        contarctList: [],
        tysm: {},
        sm: {},
        zjsm: {}
      }
    },
    created() {
      // this.drawLine();
      this.getDaoqiList();
      this.getSmC();
      this.getTySmC();
      this.getZjSmC();
    },
    methods: {
      /** 查询合同列表 */
      getDaoqiList() {
        daoqiContarct().then(response => {
          this.contarctList = response.data;
        });
      },
      getSmC() {
        getSm().then(response => {
          this.sm = response.data;
        });
      },
      getTySmC() {
        getySm().then(response => {
          this.tysm = response.data;
        });
      },
      getZjSmC() {
        getZjSm().then(response => {
          this.zjsm = response.data;
        });
      },
      drawLine() {
        this.$nextTick(function () {
          var box1 = this.$refs.myChart1;
          var box2 = this.$refs.myChart2;
          var box3 = this.$refs.myChart3;
          // 基于准备好的dom，初始化echarts实例
          let myChart1 = this.$echarts.init(box1);
          let myChart2 = this.$echarts.init(box2);
          let myChart3 = this.$echarts.init(box3);
          var option1 = {
            xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line',
                itemStyle: {
                  normal: {
                    color: '#FF6F6A', //改变折线点的颜色
                    lineStyle: {
                      color: '#FF6F6A' //改变折线颜色
                    }
                  }
                },
              }
            ]
          };
          var option2 = {
            xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line',
                itemStyle: {
                  normal: {
                    color: '#8cd5c2', //改变折线点的颜色
                    lineStyle: {
                      color: '#8cd5c2' //改变折线颜色
                    }
                  }
                },
              }
            ]
          };
          var option3 = {
            xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line',
                itemStyle: {
                  normal: {
                    color: '#39A5FC', //改变折线点的颜色
                    lineStyle: {
                      color: '#39A5FC' //改变折线颜色
                    }
                  }
                },
              }
            ]
          };
          // 绘制图表
          myChart1.setOption(option1);
          myChart2.setOption(option2);
          myChart3.setOption(option3);
        });
      }
    }
  }
</script>
<style>
  /deep/ .ant-card-head {
    position: relative;
  }
</style>
<style lang="scss" scoped>
  .IndexPage {
    padding: 20px 35px;

    .flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .indexSection1 {
      .box-card {
        width: 32%;
        text-align: center;
        color: #fff;
        background: #FF6F6A;

        .clearfix {
          font-size: 20px;
          font-weight: bold;
        }
      }

      .box-card:nth-child(2) {
        background: #8cd5c2;
      }

      .box-card:nth-child(3) {
        background: #39A5FC;
      }
    }

    .separate {
      margin: 50px 15px 25px;

      .title {
        font-size: 18px;
        font-weight: bold;
        margin: 0;
      }
    }

    .chartTitle {
      margin-top: 70px;

      > div {
        display: flex;
        align-items: center;
      }

      .cricle {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 10px;
      }
    }

    .myCharts {
      width: 100%;
      height: 300px;
    }
  }
</style>
